<template>
	<div class="cutpriceList">
		<!-- 时间选择 -->
		<div class="time_choose">
			<span>时间选择:</span>
			<div class="center_choose">
				<el-radio-group v-model="radio1">
					<el-radio-button label="全部"></el-radio-button>
					<el-radio-button label="今天"></el-radio-button>
					<el-radio-button label="昨天"></el-radio-button>
					<el-radio-button label="最近7天"></el-radio-button>
					<el-radio-button label="最近30天"></el-radio-button>
					<el-radio-button label="本月"></el-radio-button>
					<el-radio-button label="本年"></el-radio-button>
				</el-radio-group>
			</div>
			<div class="block">
				<el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
			</div>
		</div>
		<!-- 砍价状态 -->
		<div class="killstate">
			<span>砍价状态:</span>
			<div class="select_box">
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
		</div>
		<!-- 表格 -->
		<div class="table_box">
			<el-table :data="tableData" border="" style="width: 100%" align="center"> 
				<el-table-column fixed prop="id" label="ID" width="230"></el-table-column>
				<el-table-column label="砍价图片" width="120">
					<template slot-scope="scope">
						<img :src="scope.row.img" alt="">
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" width="120"></el-table-column>
				<el-table-column prop="text" label="商品介绍"></el-table-column>
				<el-table-column prop="price" label="砍价价格" width="120"></el-table-column>
				<el-table-column prop="num" label="总砍价次数" width="120"></el-table-column>
				<el-table-column prop="neednum" label="剩余砍价次数" width="120"></el-table-column>
				<el-table-column prop="startTime" label="开始时间" width="120">
					<template slot-scope="scope">{{scope.row.startTime|toTime}}</template>
				</el-table-column>
				<el-table-column prop="endTime" label="结束时间" width="120">
					<template slot-scope="scope">{{scope.row.endTime|toTime}}</template>
				</el-table-column>
				<el-table-column prop="state" label="砍价状态" width="120"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
						<!-- <el-button type="text" size="small">编辑</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页 -->
		<div class="fen">
			<el-pagination background="" layout="prev, pager, next" :total="total" @current-change="totalFn"></el-pagination>
		</div>
		<!-- 遮罩 -->
		<div class="mock">
			<el-dialog title="查看详情" :visible.sync="dialogVisible" :before-close="handleClose">
				<div class="title_table">
					<el-table :data="detailData" style="width: 100%">
						<el-table-column prop="id" label="用户ID" width="180"></el-table-column>
						<el-table-column prop="img" label="用户头像" width="180">
							<template slot-scope="scope">
								<img :src="scope.row.img" alt="">
							</template>
						</el-table-column>
						<el-table-column prop="name" label="用户名" width="180"></el-table-column>
						<el-table-column prop="price" label="砍价金额"></el-table-column>
						<el-table-column prop="startTime" label="砍价时间">
							<template slot-scope="scope">{{scope.row.startTime|toTime}}</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 	<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>-->
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      radio1: '上海', //多个按钮
      value1: '', //日历
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '', //下拉
      tableData: [], //表格
      dialogVisible: false, //开关
      detailData: [], //遮罩数据
      total: 1, //分页
      pageIndex: 1,
      pageSize: 5,
    }
  },
  created() {
    this.getdata()
  },
  methods: {
		//分页
    totalFn(e) {
      this.pageIndex = e
      this.getdata()
    },
		//获取数据
    getdata() {
      this.$api
        .killLookList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.tableData = res.data
          this.total = res.len
          console.log(res, 'res')
        })
    },
    //查看详情
    handleClick(row) {
      this.dialogVisible = true
      this.detailData = [row]
      console.log(this.detailData)
    },
    //关闭遮罩
    handleClose(done) {
      /* this.$confirm('确认关闭？')
        .then((_) => { */
      done()
      /*  })
        .catch((_) => {}) */
    },
  },
  filters: {
    toTime(value) {
      return new Date(value).toLocaleDateString()
    },
  },
}
</script>

<style lang="scss" scoped>
.cutpriceList {
  width: 100%;
  height: auto;
  padding: 20px;
  background: #fff;
  .time_choose {
    display: flex;
    align-items: center;
    .center_choose {
      margin: 0 20px;
    }
  }
  .killstate {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10px 0;
    span {
      margin-right: 20px;
    }
  }
}
</style>

